<template>
  <div class="order-container">
    <template>
      <el-table :data="orderData" border style="width: 100%">
        <el-table-column
          prop="orderDetail"
          align="center"
          label="产品图片"
          width="130"
        >
          <!-- 插槽作用域 -->

          <template v-slot="scope">
            <img
              :src="scope.row.orderDetail[0].imageUrl"
              style="vertical-align: middle"
              width="100%"
              alt=""
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="order_id"
          align="center"
          label="订单编号"
          width="250"
        ></el-table-column>
        <el-table-column
          prop="orderDetail[0].productName"
          align="center"
          label="产品名称"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="orderDetail[0].quantity"
          width="100"
          align="center"
          label="数量"
        ></el-table-column>
        <el-table-column
          prop="total_fee"
          width="100"
          align="center"
          label="总价格"
        ></el-table-column>
        <el-table-column
          prop="create_time"
          align="center"
          width="180"
          label="创建时间"
        ></el-table-column>
        <el-table-column
          prop="pay_status"
          width="100"
          align="center"
          label="支付状态"
        >
          <template v-slot="{ row }">
            {{ row.pay_status === 1 ? "已支付" : "未支付" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="order_status"
          width="100"
          align="center"
          label="订单状态"
        >
          <template v-slot="{ row }">
            <span v-if="row.order_status == 0">未提交</span>
            <span v-else-if="row.order_status == 1">提交成功</span>
            <span v-else-if="row.order_status == 2">已经取消</span>
            <span v-else-if="row.order_status == 3">无效订单</span>
            <span v-else-if="row.order_status == 4">交易关闭</span>
            <span v-else-if="row.order_status == 5">退货</span>
          </template>
        </el-table-column>
        <el-table-column prop="opration" align="center" label="操作">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              v-hasPay="[row.pay_status, row.order_status]"
              icon="iconfont icon-chongzhi"
            >
              去支付
            </el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="deleteOrder(row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<style lang="less" scoped>
/deep/.icon-chongzhi {
  font-size: 16px;
}
</style>

<script>
import * as payApi from "@/api/pay";

export default {
  id: "12",
  pid: "7",
  //   name: "订单管理",
  meta: {
    title: "order",
    icon: "iconfont icon-dd",
  },
  data() {
    return {
      orderData: [],
    };
  },
  methods: {
    deleteOrder(order) {
      this.$msgbox.confirm("删除订单", "确认要删除订单吗").then(() => {
        payApi.deleteOrder(order.order_id).then((resDelete) => {
          if (resDelete.data.state) {
            let orderIndex = this.orderData.indexOf(order);
            this.orderData.splice(orderIndex, 1);
            this.$msgbox.alert("删除成功");
          } else {
            this.$msgbox.alert("删除失败");
          }
        });
      });
    },
  },
  mounted() {
    payApi.getAllOrder().then((res) => {
      console.log(this);
      this.orderData = res.data.data;
    });
  },
  directives: {
    hasPay: {
      inserted(el, binding) {
        let [pay_staus, order_status] = binding.value;
        let className = el.className;
        if (pay_staus !== 0 || order_status !== 1) {
          el.disable = true;
          el.className = `${className} is-disabled`;
        }
      },
    },
  },
};
</script>
